<template>
	<div class="activity-banner">
		<div class="content">
			<label><em>{{title}}</em></label>
			<div class="rule" @click="ruleShow=true"><van-icon name="question-o" /></div>
			<template v-if="!isActEnd && !countdown.stoped">
				<span class="font-14">距结束</span>
				<div class="count-down">
					<div>
						<template v-if="countdown.day!=='00'"><em>{{countdown.day}}</em> 天 </template> <em>{{countdown.hou}}</em> : <em>{{countdown.min}}</em> : <em>{{countdown.sec}}</em>
					</div>
				</div>
			</template>
			<template v-else>
				<span class="font-14">活动已结束</span>
			</template>
		</div>
	</div>
	<van-dialog v-model:show="ruleShow" theme="round-button" className="cust-rule">
		<template #title>
			<div class="dialog-title"><van-tag type="primary" plain :color="themeColor" :text-color="themeColor">{{typeName}}</van-tag> 规则</div>
		</template>
		<div v-html="ruleContent" class="content-wrap"/>
	</van-dialog>
</template>
<style lang="scss" scoped>

.activity-banner {
	--van-primary-color:v-bind(themeColor);
	height: 40px; display:flex; align-items: center;
	overflow: hidden; border-radius:8px; margin:0 10px 10px 10px;
	color: var(--white-color);
	position: relative;
	background: linear-gradient(100deg, var(--van-primary-color) -40%, var(--bar-input-color) 460%);
	&::before {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		background-image: url(/img/cardBg.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		opacity:.6;
	}
	.content{
		width:100%;height:100%;z-index: 1; position: relative;display: flex; align-items: center;
		label{
			display:block; padding-left:12px; position:relative; font-size:16px;
		}
	}
	.type-tag{
		border:1px solid var(--white-color); padding:0 6px; height:16px; display:inline-flex; margin:0 auto 0 4px; border-radius: 4px;
		line-height:14px;background:rgba(0,0,0,.2); opacity: .7; font-size:12px;
	}
	.count-down{
		margin:0 12px 0 6px; font-size:12px;
		em{font-style: normal;font-size:14px;}
	}
	.rule{
		margin-right:auto; text-align:center; line-height:36px; cursor:pointer; padding:4px;
		border-radius:0 8px 8px 0; height: 40px; width:32px;
	}
}
.dialog-title{
	position:relative;
	.van-tag{position:absolute;left:12px;top:-16px;}
}
.content-wrap{
	overflow-x:hidden;overflow-y:auto; font-size:14px;text-indent:28px;padding:12px; max-height:70vh;
}
</style>
<script lang="ts" setup>
import {copyText} from "@/utils/validate";

const props=defineProps({
	title:{
		type:String,
		required:true,
	},
	typeName:{
		type:String,
		required:true,
	},
	themeColor:{
		type:String,
		required:true,
	},
	endTime:{
		type:String,
		required:true,
	},
	isActEnd:{
		type:Boolean,
		required:true,
		default:false,
	},
	ruleContent:{
		type:String,
		required:false,
	}
})

const {countdown} =useCountDownExt(props.endTime)
const  ruleShow =ref(false)

//methods
const onRuleClose=()=>{
	if(ruleShow.value){
		//emit('update:modelValue',false)
		ruleShow.value=false
	}
}
</script>